<template>
    <div>
        <el-row style="background-color:#E4E7ED">
            <el-col :span="8">
                <div class="demo-image" style="padding-left:50%">
                    <img src="../assets/warren_market.png" style="width: 240px; height: 180px">
                </div>
            </el-col>
            <el-col :span="8" style="padding-top:4%">
                <div class="demo-input-suffix" style="padding-left:50px">
                    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" style="width:600px">
                        <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button> <!--将文本内容输出到data里的input中 这个button绑定方法获取input数据进行axios-->
                    </el-input>
                </div>
            </el-col>
        </el-row>
        <el-row style="background-color:#606266;height:50px">
              <el-link :underline="false" target="_blank" style="color:white;font-size:20px;padding-top:10px;padding-left:250px">{{this.tableData.shop}}</el-link>
        </el-row>
        <el-row :gutter="20">
            <div style="height:500px">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <div class="block" style="padding-top:50px;padding-left:200px">
                            <el-carousel height="290px">
                                <el-carousel-item v-for="item in 5" :key="item">
                                    <img :src="require('../assets/'+category+'/'+id+'/'+item+'.jpg')" height="100%" width="100%">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div style="padding-top:50px;padding-left:40px">
                        <p style="font-size:20px"><b>{{this.tableData.title}}</b></p>
                        <el-row style="padding-top:20px">
                            <el-col :span="2"><div class="grid-content bg-purple">价 格：</div></el-col>
                            <el-col :span="2" style="font-size:18px;color:red"><div class="grid-content bg-purple-light">￥{{this.price}}</div></el-col>
                        </el-row>
                        <el-row style="padding-top:30px">
                            <el-col :span="2" style="padding-top:7px"><p style="color:black">库存：{{this.product_nums}}</p></el-col>
                        </el-row>
                        <el-row style="padding-top:30px">
                            <el-col :span="20" style="padding-top:7px"><p style="color:black">{{this.countDownTime}}</p></el-col>
                        </el-row>
                        <el-row style="padding-top:35px">
                            <el-button type="warning" @click="pay" v-if="this.countDownTime == '秒杀已开始'">立即购买</el-button>
                            <el-button type="warning" @click="pay" v-else disabled>立即购买</el-button>
                        </el-row>
                    </div>
                </el-col>
            </div>
        </el-row>
    </div>
</template>

<script>
let timer = null;
let tipTextPrefix = '离秒杀开始还有： ';
export default {
    name: "seckilldetail",
    data(){
        return{
            seckill_id: '',
            integral: '',
            category: '',
            id: '',
            price: '',
            product_nums: '',
            start: "",
            tableData: [],
            input: '',
            productnum: 1,
            currentTime: this.$moment().format('YYYY-MM-DD HH:mm:ss'), // 请使用步骤1-3计算出来的服务器时间 2021-10-05 9:57:00
            countDownTime: tipTextPrefix + '0天 0时 0分 0秒'
        }
    },
    mounted(){
        this.$axios.get("/api/getDetail?id="+this.$route.query.id+"&category="+this.$route.query.category).then(res=>{
            this.id = this.$route.query.id,
            this.seckill_id = this.$route.query.seckill_id,
            this.category = this.$route.query.category,
            this.price = this.$route.query.price,
            this.product_nums = this.$route.query.product_nums,
            this.start = this.$route.query.start,
            this.tableData = res.data,
            console.log(this.tableData);
            this.submit();
        });
        this.$axios.get("/api/getUserIntegralByUserName?username="+this.$cookies.get("username")).then(res=>{
            this.integral = res.data
        });
    },
    methods: {
        handleClick() {
            this.$router.push("/productsshow?title="+this.input)
        },
        pay(){
            //this.$router.push("/paypage?id="+this.$route.query.id+"&category="+this.$route.query.category+"&title="+this.tableData.title+"&price="+this.tableData.price+"&product_nums="+this.productnum+"&shopname="+this.tableData.shop)
        

           this.$axios.post(
                // 也可以设置为自己的主机名加端口号
                "http://localhost:8080/seckill/alipay?product_id=" +
                    this.id +
                    "&category=" +
                    this.category +
                    "&title=" +
                    this.tableData.title +
                    "&product_nums=" +
                    1 +
                    "&outtradeno=" +
                    this.$md5(this.tableData.title+this.currentTime) +
                    "&price=" +
                    this.price +
                    "&status=" +
                    "待支付" +
                    "&username=" +
                    this.$cookies.get("username") +
                    "&integral=" +
                    this.integral +
                    "&shopname=" + 
                    this.tableData.shop +
                    "&seckill_id=" +
                    this.seckill_id

                )
                .then((resp) => {
                // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                const divForm = document.getElementsByTagName("div");
                if (divForm.length) {
                    document.body.removeChild(divForm[0]);
                }
                const div = document.createElement("div");
                div.innerHTML = resp.data; // data就是接口返回的form 表单字符串
                document.body.appendChild(div);
                document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
                document.forms[0].submit();
                });

        },
        submit() {
            const _this = this;
            clearInterval(timer);
            timer = setInterval(() => {
                _this.countDownTime = _this.countDown();
            }, 1000);
        },
        countDown() {
            console.log(this.start);
            const seconds = this.$moment(this.start).diff(new Date, 'seconds');
            if (seconds <= 0) {
                clearInterval(timer);
                return '秒杀已开始';
            }
            const second = seconds%60;
            const minutes = (seconds-second) / 60;
            const minute = minutes%60;
            const hours = (minutes-minute) / 60;
            const hour = hours%24;
            const day = (hours-hour) / 24;
            const res = tipTextPrefix + day + '天 '+ hour + '时 '+ minute + '分 '+ second + '秒 ';
            return res;
        }
    }
}
</script>